<%@page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/jsp/comm_css_include.jsp"%>
<!-- zTreeStyle.css -->
<link rel="stylesheet" type="text/css"
	href="${basePath}/css/zTreeStyle/zTreeStyle/zTreeStyle.css">
<!doctype html>
<html>
<head>
<style type="text/css">
.gray-bg {
	background-color: #fff;
}
</style>
</head>
<body class="gray-bg">
	<div class="ibox-content">
		<form class="form-horizontal m-t" id="commentForm">
			<table cellpadding="0" cellspacing="0" border="0"
				bordercolor="#3B95C8" width="100%" class="tablefont">
				<tr>
					<td width="23%" align="right"><label
						class="col-sm-3 control-label np">快捷方式名称：</label></td>
					<td width="77%">
						<div class="form-group">
							<div class="col-sm-8">
								<input id="powerId" name="powerId" type="hidden" /> <input
									id="shortcutName" name="shortcutName" minlength="1"
									maxlength="80" type="text"
									class="form-control smalliconcur smallicon" required=""
									onclick="choicekj()" placeholder="快捷方式名称(必填)"
									readonly="readonly" />
							</div>
						</div>
					</td>
				</tr>

				<tr>
					<td width="23%" align="right"><label
						class="col-sm-3 control-label np">菜单排序：</label></td>
					<td width="77%">
						<div class="form-group">
							<div class="col-sm-8">
								<input id="sortValue" name="sortValue" max="100" type="number"
									class="form-control" required="" aria-required="true"
									placeholder="请输入排序(必填)" />
							</div>
						</div>
					</td>
				</tr>


				<tr>
					<td width="23%" align="right"><label
						class="col-sm-3 control-label np">图标路径：</label></td>
					<td width="77%">
						<div class="form-group">
							<div class="col-sm-8">
								<input id="imgUrl" name="imgUrl" minlength="1" maxlength="128"
									type="text" class="form-control smalliconcur smallicon"
									aria-required="true" readonly="readonly" onclick="choiceimg()" />
							</div>
						</div>
					</td>
				</tr>


				<tr>
					<td width="23%" align="right"><label
						class="col-sm-3 control-label np">备注：</label></td>
					<td width="77%">
						<div class="form-group">
							<div class="col-sm-8">
								<textarea id="remarks" name="remarks" cols="20" maxlength="100"
									rows="5" type="text" class="form-control" aria-required="true"
									placeholder="请输入备注"></textarea>
							</div>
						</div>
					</td>
				</tr>

			</table>
			<table cellpadding="0" cellspacing="0" border="0"
				bordercolor="#3B95C8" width="100%">
				<tr>
					<td width="100%" align="center">
						<div class="ibox-content">
							<button type="button" class="btn dpbtn_green" onclick="save();">确定</button>
							<button type="reset" class="btn dpbtn_red">重置</button>
						</div>
					</td>
				</tr>
			</table>
		</form>

	</div>
	<div class="boxList" style="display: none" id="boxList">
		<div class="marcontent" id="rowshorCut">
			<div class="baka"></div>
			<div class="bakb"></div>
			<div class="bakc"></div>
			<div class="bakd"></div>
		</div>	
		
		<table cellpadding="0" cellspacing="0" border="0" bordercolor="#3B95C8" width="100%">
			<tr>
				<td width="100%" align="center">
					<div class="ibox-content" style="border: none">
						<button type="button" class="btn dpbtn_green" onclick="choicesave();">确定</button>
					</div>
				</td>
			</tr>
		</table>
	</div>

	<!-- public quote -->
	<%@include file="/jsp/comm_js_include.jsp"%>

	<!-- custom js -->
	<%@include
		file="/js/common-dpqc/dpqc-validate/comm_validate_include.jsp"%>
	<script type="text/javascript"></script>

	<!--zTreeStyle.js-->
	<script type="text/javascript"
		src="${basePath}/js/zTreeStyle/jquery.ztree.core.js" charset="utf-8"></script>
	<script type="text/javascript"
		src="${basePath}/js/zTreeStyle/jquery.ztree.excheck.js"
		charset="utf-8"></script>

	<!--
	    作者：zhangpp
	    时间：2017-04-06
	    描述：js
	-->
	<script type="text/javascript">
		var layerboxList;
		var choiceimg = function() {
			layerboxList = layer.open({
		    	  title:'快捷方式底色选择',
		    	  type: 1,
		    	  area: ['460px', '250px'], //宽高
		    	  content: $("#boxList")
		    });
		}
		
		var imgsrc;
		
		$(function(){
			 var $rowdiv = $("#rowshorCut").find("div");
			 $rowdiv.click(function(){
				 $(this).addClass("rowimg");
				 imgsrc = $(this).attr("class");
				 $(this).siblings().removeClass("rowimg");
			 });
		 })
		
		 var choicesave = function() {
			$("#imgUrl").val(imgsrc);
			layer.close(layerboxList);
		}
		 
		 var choicekj = function() {
	    	$.dpAjax({
	    		url:'${basePath}/power/getPowerListForShortcut',
	 			data:{},
	 			success: function(datas){
	     			  if(datas.flag == "100100")
					  {	  
	     				 var content = '<div class="ibox-content" style="height: 230px;border: 1px solid #F5F5F6; overflow:auto;overflow-x: hidden;">'
		    					+ '	<div id="treeDemo" class="ztree">&nbsp;</div>'
		    				+ '</div>'
		    				+ '<div class="ibox-content">'
		    				+ '	 <button class="btn dpbtn_green" type="button" onclick="confirmBase();">确定</button>'
		    				+ '	 <button class="btn dpbtn_red" type="button" onclick="cancelBase();">取消</button>'
		    				+ '</div>';
		    		
					    	index = layer.open({
						    	  title:'菜单',
						    	  type: 1,
						    	  area: ['300px', '350px'], //宽高
						    	  content: content
						    });
					    	var setting = {
				 					check: {
				 						enable: false
				 					},
				 					data: {
				 						simpleData: {
				 							enable: true
				 						}
				 					}
				 			};			
	     				  var  arr = [];
	     				  var result = datas.result;
	     				  for(var i=0;i<result.length;i++)
	     				  {  
	     					  var objs = {};
	     					  objs.id = result[i].replaceId;
	     					  objs.pId = result[i].parentId;
	    					  objs.name = result[i].name;
	    					  if(result[i].powerCode == 'diepu:base') {
	    					  	 objs.open = true;
	    					  } else {
	    						 objs.open = false;
	    					  }
	     					  arr.push(objs);
	     				  } 
	    				  $.fn.zTree.init($("#treeDemo"), setting, arr);
						  return;
					  }
					  if(datas.flag == "100200")
	                  {
						  $.fn.showDatas({"datas":datas});
	                	  return;
	                  }
					  layer.msg(datas.message, {icon: 2});
	             }
	    	});
	    }
		 
	   var confirmBase = function() {
	    	 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); 
	    	 var node=zTree.getSelectedNodes();
	    	 var treeNode = node[0];
	    	 if(treeNode.isParent){
	    		 layer.msg("请选择子菜单！", {icon: 5});
	    		 return;
	    	 }
	    	 var parentNode = treeNode.getParentNode();
	    	 if(!parentNode) {
	    		 layer.msg("只能选择子菜单!", {icon: 5});
	    		 return;
	    	 }
	    	 document.getElementById('shortcutName').value=treeNode.name;
	    	 document.getElementById('powerId').value=treeNode.id;
	    	 layer.closeAll(); 
	    }
		
	    var cancelBase = function() {
		   layer.closeAll(); 
	    }
	
	    var addUrl = '${basePath}/BaseShortcutController/save';
	    var save = function () {
	        var validstatus = $("#commentForm").valid();
	        if (validstatus) {
	            var data = $('#commentForm').serialize();
	            $.dpAjax({
	                url: addUrl,
	                data: data,
	                success: function (datas) {
	                    if (datas.flag == "100100") {
	                        layer.msg("添加执行成功！", {icon: 6});
	                        parent.layer.close(parent.addlayer);
	                        return;
	                    }
	                    if (datas.flag == "100200") {
	                        $.fn.showDatas({"datas": datas});
	                        return;
	                    }
	                    layer.msg(datas.message, {icon: 2});
	                }
	            });
	        }
	    }

	    $(function(){
	  		// 验证
  	        $("#commentForm").validate({
  	            rules: {
  	               sortValue: {
 	                    required: true,
 	                   zhengZS:true,
 	                },
 	               imgUrl:{
 	                    required: true,
 	                }
  	            },
  	            messages: {
  	            	shortcutName: {
  	            		required: "名称必填"
  	                },
  	                sortValue: {
	                    required: "排序必填",
	                    zhengZS:"只能正整数",
	                },
	                imgUrl:{
 	                    required: "路径必填",
 	                }
  	            },
  	            //重写showErrors
  	            showErrors: function (errorMap, errorList) {
  	                
  	                $.each(errorList, function (i, v) {
  	                    layer.tips(v.message, v.element, { time: 1500 });
  	                    return false;
  	                });  
  	            },
  	            /* 失去焦点时验证 */
  	            onfocusout: false,
  	            /*  键盘抬起不验证 */
  	            onkeyup:false,
  	        });
	    });
	</script>
</body>
</html>
